<%@ page language="java" contentType="text/html;charset=utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="author" content="">
	<link rel="shortcut icon" href="../../assets/ico/favicon.ico">

	<title>GuHappy</title>
	<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	%>
	<base href="<%=basePath%>">
	<!-- Bootstrap -->
	<style>
	.warning {
		color:red;
	}
	.modal-dialog {
		width:400px;
	}
	.login-input {
		width:70%;
		height: 34px;
		padding: 6px 12px;
		font-size: 14px;
		line-height: 1.42857143;
		color: #555;
		background-color: #fff;
		background-image: none;
		border: 1px solid #ccc;
		border-radius: 4px;
		-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
		box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
		-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
		transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	}
	</style>
	<link href="css/buttons.css" rel="stylesheet">
</head>
<body>
	<!--dialog-->
	<div id="loginModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<form class="form-horizontal well" data-async data-target="#loginModal" action="signOnAction.action" method="POST" id="signOnForm">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
						<img src="images/guhappy_title.png" />
					</div>
					<div class="modal-body">
							<label for="email">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Email:&nbsp;&nbsp;&nbsp;</label>
							<s:textfield id="email" name="email" size="20" class="login-input" placeholder="Enter Email"
								maxlength="30" type="text" value=""
								data-rules="required:true" data-container="body">
							</s:textfield>
							<p style="margin-top:10px">
							<label for="password" style="margin-top:10px">Password:&nbsp;&nbsp;&nbsp;</label>
								<s:password name="passwd" size="20" maxlength="30" placeholder="Enter Password" 
									type="text" value="" data-rules="required:true"
									data-container="body">
								</s:password>
							</p>
							<p><s:url action="forgetpasswordAction.action" var="aURL" />
								<s:a
									style="clear: both;display: block; float: left;font-size: 0.9em;"
									href="%{aURL}">Forgot password?</s:a></p>
							<span id='login-warning' class='warning hide'>Your username/password is not correct.</span>
					</div>
					<div class="modal-footer">
						<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
						 <button form="signOnForm" class="btn btn-blue" type="submit">Submit</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	
	<!-- Bootstrap trigger to open modal -->

	<!-- Fixed navbar -->
	<div class="navbar navbar-default navbar-fixed-top" role="navigation">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<span class="navbar-brand">GuHappy</span>
			</div>
			<div class="navbar-collapse collapse">
				<ul class="nav navbar-nav navbar-right">
					<li class="dropdown after-login">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">View <b class="caret"></b></a>
						<ul class="dropdown-menu">
							<li><a href="#">Recently</a></li>
							<li><a href="#">Most popular</a></li>
						</ul>
					</li>
					<li class="dropdown after-login">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">Contest <b class="caret"></b></a>
						<ul class="dropdown-menu">
							<li><a href="#">Weekly</a></li>
							<li><a href="#">Monthly</a></li>
						</ul>
					</li>
					<li class="dropdown after-login">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">Blog <b class="caret"></b></a>
						<ul class="dropdown-menu">
							<li><a href="#">Public Blog</a></li>
							<li><a href="#">My Blog</a></li>
							<li><a href="#">Friend's Blog</a></li>
						</ul>
					</li>
					<li><a href="#">中文</a></li>
					<s:if test="#session.webUser">
						<li><a href="#">Welcome: <s:property value="#session.webUser.userName"/></a></li>
						<li><s:url action="signOffAction.action" var="aURL3" />
							<s:a href="%{aURL3}">
								Sign Off
							</s:a></li>
					</s:if>
					<s:else>
					    <li><a id="sign_on" class='before-login' href="#" data-toggle="modal" data-target="#loginModal">Sign on</a></li>
						<li><s:url action="registrationAction.action" var="aURL2" />
							<s:a href="%{aURL2}">
								Sign me up
							</s:a>
						</li>
					</s:else>
					<li><a href="#">FAQ</a></li>
				</ul>
			</div><!--/.nav-collapse -->
		</div>
	</div>
</body>
<script type="text/javascript" src="js/modal.js"></script>
<script>
(function($) {
	$(function(){
	          //Modal page should have a section with the class modal-header
	          var modal =  $(".modal-header").parent()
	          containerAjaxFunc(modal.attr("id"), true);
	        })
	})
</script>
</html>